<template>
   <div class="mainframe_box">
        <div ref="top" class="mainframe_top">
            <div class="mainframe_top_left"></div>
            <div style="display: flex; flex:1;">
                <div class="mainframe_top_center1"></div>
                <div class="mainframe_top_center2">百安科技</div>
                <div class="mainframe_top_center1"></div>
            </div>
            <div class="mainframe_top_right"></div>
        </div>
        <div class="mainframe_middle">
            <div ref="middleLeft" class="mainframe_left">
                <div class="title_div">设备列表</div>
                <div class="main_tree" :style="{ height: middleHeight + 'px' }">
                    <tree
                    :nodes="nodes"
                    :select_id="select_id"
                    :height="middleHeight"
                    @node-clicked="handleNodeClicked"
                    >
                    </tree>

                </div>
            </div>
            <div class="mainframe_center">
                <div class="mainframe_center_img" style="flex:1;">
                    <circular v-if="dataReady"
                    :nodes="treeData"
                    :height="middleHeight + 27 - 150"
                    >
                    </circular>
                </div>
                <div class="main_tree" style="height:150px; overflow: hidden;">
                    <captions v-if="alarmReady" :data="alarmData"></captions>
                </div>
            </div>
            <div ref="middleRight" class="mainframe_right">
                <div>
                    <div class="title_div">站点设备</div>
                    <div class="main_tree" :style="{ height: rightHeight + 'px' }">
                        <chartBar v-if="dataReady"
                        :height="rightHeight"
                        :nodes="treeData"
                        >
                        </chartBar>
                    </div>
                </div>
                <div>
                    <div class="title_div">报警信息</div>
                    <div class="main_tree" :style="{ height: rightHeight + 'px' }"></div>
                </div>
            </div>
        </div>
        <div ref="bottom" class="mainframe_bottom">
            <div class="mainframe_top_left"></div>
            <div class="mainframe_bottom_center"></div>
            <div class="mainframe_top_right"></div>
        </div>
   </div>
   <div ref="winBox">
        <div class="menu_btn_box">
            <div class="menu_btn" v-for="item in items" :key="item.name" @click="menuClick(item)">
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
    <div ref="userInfo">
        <userInfo></userInfo>
    </div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import axios from 'axios'
import tree from '@/components/tree.vue'
import chartBar from '@/components/chartBar.vue'
import circular from '@/components/circular.vue'
import captions from '@/components/captions.vue'
import userInfo from '@/components/userInfo.vue'
import { formatDate, findInObject } from '@/utils/utils.js'

export default {
    setup () {
        const items = ref([])
        const throttle = (func, wait) => {
            let lastTime = 0
            return function (...args) {
                const now = new Date().getTime()
                if (now - lastTime >= wait) {
                func.apply(this, args)
                lastTime = now
                }
            }
        }
        const top = ref(null)
        const topHeight = ref(71)
        const bottomHeight = ref(71)
        const middleLeft = ref(null)
        const middleRight = ref(null)
        const bottom = ref(null)
        const middleHeight = ref(window.innerHeight - topHeight.value - bottomHeight.value - 40 - 27)
        const rightHeight = ref((window.innerHeight - topHeight.value - bottomHeight.value - 40) / 2 - 27)
        const nodes = ref(null)
        const treeData = ref(null)
        const dataReady = ref(false)
        const alarmReady = ref(false)
        const alarmData = ref([])
        const handleResize = () => {
            if (middleLeft.value) {
                middleLeft.value.style.height = window.innerHeight - topHeight.value - bottomHeight.value - 40 + 'px'
                middleHeight.value = window.innerHeight - topHeight.value - bottomHeight.value - 40 - 27
            }
            if (middleRight.value) {
                middleRight.value.style.height = window.innerHeight - topHeight.value - bottomHeight.value - 40 + 'px'
                rightHeight.value = (window.innerHeight - topHeight.value - bottomHeight.value - 40) / 2 - 27
            }
        }
        const instanceResize = throttle(handleResize, 100)
        onMounted(function () {
            if (middleLeft.value) {
                const tmpHeight = window.innerHeight - topHeight.value - bottomHeight.value - 40
                middleLeft.value.style.height = tmpHeight + 'px'
            }
            if (middleRight.value) {
                const tmpHeight = window.innerHeight - topHeight.value - bottomHeight.value - 40
                middleRight.value.style.height = tmpHeight + 'px'
            }
            window.addEventListener('resize', instanceResize)
        })
        onBeforeUnmount(function () {
            window.removeEventListener('resize', instanceResize)
        })

        return {
            top,
            middleLeft,
            middleRight,
            bottom,
            middleHeight,
            rightHeight,
            nodes,
            dataReady,
            alarmReady,
            treeData,
            items,
            alarmData
      }
    },
    data () {
        return {
            select_id: '',
            winBox: '',
            comBox: '',
            userArr: [
                { name: '基本信息', com: 'userInfo' },
                { name: '预警信息' },
                { name: '事件信息' },
                { name: '电能质量' },
                { name: '用电分析' },
                { name: '历史数据' },
                { name: '安全用电' },
                { name: '更多特性' },
                { name: '控制台' }
            ],
            depArr: [
                { name: '基本信息' },
                { name: '设备列表' },
                { name: '预警信息' },
                { name: '事件信息' },
                { name: '主系统图' }
            ]
        }
    },
    components: {
        tree,
        chartBar,
        circular,
        captions,
        userInfo
    },
    mounted () {
        this.getToken()
    },
    methods: {
        handleNodeClicked (node) {
            if (node.base_type === '0') {
                this.items = this.userArr
            }
            if (node.base_type === '1') {
                this.items = this.depArr
            }
            nextTick(() => {
                if (this.winBox !== '') {
                    this.$closeWindow(this.winBox)
                    this.winBox = ''
                }
                this.select_id = node.id
                if (node.id === 'z0') {
                    return
                }
                this.winBox = this.$createWindow({
                    width: 550,
                    height: 400,
                    title: node.name,
                    content: this.$refs.winBox,
                    use: {
                        drag: true
                    }
                })
            })
        },
        menuClick (menu) {
            this.comBox = this.$createWindow({
                width: window.innerWidth - 10,
                height: this.middleHeight + 27,
                title: menu.name,
                content: this.$refs[menu.com]
            })
        },
        getToken () {
            if (this.$store.state.token !== '' && this.$store.state.token !== undefined) {
                this.getList()
                return
            }
            const username = this.$store.state.username
            const password = this.$store.state.password
            axios.post('/get/auth/login', {
                username: username,
                password: password
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                const val = response.data
                this.$store.commit('settokenData', val.token)
                this.getList()
            })
            .catch(error => {
                console.error(error)
            })
        },
        getList () {
            axios.post('/api/get_device.php?act=get_list', {}, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(response => {
                const val = response.data
                const _nodes = {
                        id: 'z0',
                        name: '项目列表',
                        children: []
                    }
                const _tmp = []
                val.forEach(item => {
                    if (item.base_type === '1') {
                        item.id = 'z' + item.mid
                        item.children = []
                        if (item.searchid === '') {
                            item.online = false
                        }
                        _nodes.children.push(item)
                    } else {
                        _tmp.push(item)
                    }
                })
                _tmp.forEach(item => {
                    _nodes.children.forEach(item1 => {
                        if (('z' + item1.mid) === item.parentId) {
                            item.id = 'g' + item.mid
                            if (item.searchid === '') {
                                item.online = false
                            }
                            item1.children.push(item)
                            return false
                        }
                    })
                })
                const _data = []
                _data.push(_nodes)
                this.nodes = _data
                this.treeData = _data[0].children
                this.dataReady = true
                this.getAlarm()
            })
            .catch(error => {
                console.error(error)
            })
        },
        getAlarm () {
            const token = this.$store.state.token
            const nodes = this.nodes
            axios.get('/get/alarms?fetchOriginator=true&searchStatus=ACTIVE&pageSize=1000&page=0&sortProperty=createdTime&sortOrder=DESC', {
                headers: {
                    'Content-Type': 'application/json',
                    'X-Authorization': 'Bearer ' + token
                }
            })
            .then(response => {
                const val = response.data
                const arr = []
                val.data.forEach(item => {
                    if (item.severity.toLowerCase() === 'indeterminate') {
                        return true
                    }
                    const time = formatDate(item.createdTime)
                    let _status = ''
                    if (item.status === 'ACTIVE_UNACK') {
                        _status = '未确认'
                    }
                    if (item.status === 'ACTIVE_ACK') {
                        _status = '已确认'
                    }
                    const obj = findInObject(nodes, 'num', item.originatorName)
                    const name = obj[0].name
                    arr.push({ type: item.type, datetime: time, des: item.details.data, device: item.originatorName.split('_')[1], num: item.originatorName, status: item.status, id: item.id.id, act: _status, name: name })
                })
                this.alarmData = arr
                this.alarmReady = true
            })
            .catch(error => {
                console.error(error)
            })
        }
    }
}
</script>

<style scoped>
.mainframe_box{
    width: 100%;
}
.mainframe_top {
    width: 100%;
    height: 71px;
    background-color: #040d32;
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
}
.mainframe_top_left {
    background-image: url('~@/assets/bg_left1.png');
    width: 353px;
    height: 71px;
    float: left;
}
.mainframe_top_right {
    background-image: url('~@/assets/bg_right1.png');
    width: 353px;
    height: 71px;
    float: right;
}
.mainframe_top_center1 {
    background-image: url('~@/assets/bg_line.png');
    background-repeat: repeat-x;
    background-position: center;
    flex: 1;
}
.mainframe_top_center2 {
    width: 500px;
    color: #19d2ed;
    text-align: center;
    font-size: x-large;
    background-image: url('~@/assets/logo_bg.png');
    font-family: 微软雅黑;
}
.mainframe_middle {
    width: 100%;
    display: flex;
    background: #040d32;
    white-space: nowrap;
    margin-top: 20px;
    margin-bottom: 20px;
}
.mainframe_center{
    flex:1;
    display: flex;
    flex-direction: column;
}
.mainframe_center_img{
    background-image: url('~@/assets/main_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: 50% 50%;
}
.mainframe_left, .mainframe_right{
    width:20%;
}
.title_div {
    background-image: url('~@/assets/title_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    line-height: 27px;
    color: #1af7ff;
    font-weight: bold;
    font-size: large;
}
.mainframe_bottom {
    height: 71px;
    background-image: none;
    background-color: #040d32;
    display: flex;
}
.mainframe_bottom_center{
    display: flex;
    flex:1;
}
.main_tree {
    border-radius: 5px;
    background: url('~@/assets/tab_bg3.png') no-repeat left top, url('~@/assets/tab_bg4.png') no-repeat right top, url('~@/assets/tab_bg.png') repeat, url('~@/assets/tab_bg5.png') no-repeat left bottom, url('~@/assets/tab_bg6.png') no-repeat right bottom;
}

.menu_btn_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
}

.menu_btn{
    background: url('~@/assets/menu_bg1.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 80% 80%;
    width: 128px;
    padding-top: 90px;
    flex-basis: 20%;
    box-sizing: border-box;
    text-align: center;
    color: #1af7ff;
    font-weight: bold;
    font-size: smaller;
    cursor: pointer;
}
</style>
